<template>
	<view class="container">
		<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" :collection="getmyCoupons1"
			field="modify_time,create_time,coupon_id,user_id,coupon_status">
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="data">
				<uni-list>
					<view class="coupon-center">
						<div class="swiper-box">
							<div class="swiper-item">
								<div class="scroll-v" enableBackToTop="true" scroll-y>
									<view class="coupon-item" v-for="(item, index) in data" :key="index">
										<view v-if="item.coupon_status=='1'"
											style="height: 100%;display: flex;align-items: center;">
											<view class="left">
												<view class="wave-line">
													<view class="wave" v-for="(item1, index) in 12" :key="index"></view>
												</view>
												<view class="message">
													<view>
														<span
															v-if="item.coupon_id[0].coupon_discount != null">{{ item.coupon_id[0].coupon_discount }}折</span>
														<span v-else>{{ item.coupon_id[0].coupon_limit }}元</span>
													</view>
													<view>满{{ item.coupon_id[0].coupon_limit }}元可用</view>
												</view>
												<view class="circle circle-top"></view>
												<view class="circle circle-bottom"></view>
											</view>
											<view class="right">
												<view>
													<view class="coupon-title wes-3">
														<span v-if="item.coupon_id[0].coupon_type == '0'">全平台</span>
														<view v-else>光明小店专用使用
														</view>
													</view>
													<view style="color:darkgray;"><span> 待使用 </span></view>
													<view>
														有效期至：{{ new Date(item.coupon_id[0].coupon_end).toLocaleString('chinese', { hour12: false }).split(" ")[0] }}
													</view>
												</view>
												<view class="bg-quan"> 券 </view>
											</view>
										</view>
										<view v-else style="height: 100%;display: flex;align-items: center;">
											<view class="left" style="background-color: rgb(169,169,169);">
												<view class="wave-line" style="background-color: rgb(169,169,169);">
													<view class="wave" v-for="(item1, index) in 12" :key="index"></view>
												</view>
												<view class="message">
													<view>
														<span
															v-if="item.coupon_id[0].coupon_discount != null">{{ item.coupon_id[0].coupon_discount }}折</span>
														<span v-else>{{ item.coupon_id[0].coupon_limit }}元</span>
													</view>
													<view>满{{ item.coupon_id[0].coupon_limit }}元可用</view>
												</view>
												<view class="circle circle-top"></view>
												<view class="circle circle-bottom"></view>
											</view>
											<view class="right">
												<view>
													<view class="coupon-title wes-3">
														<span v-if="item.coupon_id[0].coupon_type == '0'"
															style="color:darkgray;">全平台</span>
														<view v-else style="color:darkgray;">光明小店专用使用
														</view>
													</view>
													<view v-if="item.coupon_status=='2'">
														<view style="color:darkgray;"><span> 已使用 </span></view>
													</view>
													<view v-else>
														<view style="color:darkgray;"><span> 已过期 </span></view>
													</view>
													<view style="color:darkgray;">
														有效期至：{{ new Date(item.coupon_id[0].coupon_end).toLocaleString('chinese', { hour12: false }).split(" ")[0] }}
													</view>
												</view>
												<view class="bg-quan"
													style="color:darkgray;border: 6rpx solid darkgray;"> 券 </view>
											</view>
										</view>
									</view>
								</div>
							</div>
						</div>
						</div>
					</view>
				</uni-list>
			</view>
			<uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
		</unicloud-db>
	</view>
</template>

<script>
	const db = uniCloud.database()
	export default {
		computed: {
			getmyCoupons1() {
				// return [
				// 	db.collection('t_shop_coupon_user').where('"usesr_id"=="638c5ba226b3d80001fde6f9"')
				// 	.field('coupon_id,user_id,coupon_status')
				// 	.getTemp()
				// ]
				return [
					db.collection('t_shop_coupon_user').where(this.where).field('coupon_id,coupon_status,user_id')
					.orderBy('coupon_status').getTemp(),
					db.collection('t_shop_coupon').field(
						'_id,coupon_name,coupon_num,coupon_limit,coupon_discount,coupon_price,coupon_type,coupon_end')
					.getTemp()
					// db.collection('t_shop_coupon').field('coupon_name,coupon_num,coupon_limit,coupon_discount').getTemp()
				]
			}
		},
		data() {
			return {
				collectionList: "t_shop_coupon_user",
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				},
				uid: '',
				where: "",
				coupons1: [], //未使用
				coupons2: [], //已使用
				coupons3: [], //已过期
			}
		},
		onPullDownRefresh() {
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			this.$refs.udb.loadMore()
		},
		onLoad() {
			// console.log("加载未使用的优惠券")
			// let where = '"coupon_status"=="1"'
			this.uid = uniCloud.getCurrentUserInfo().uid
			var x = '"user_id"' + '==' + '"' + this.uid + '"'
			this.where = x
		},
		methods: {
			handleItemClick(id) {
				uni.navigateTo({
					url: './detail?id=' + id
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.coupon-center {
		height: 100%;

		.swiper-box {
			.coupon-item {
				display: flex;
				align-items: center;
				height: 220rpx;
				margin: 20rpx;

				.left {
					height: 100%;
					width: 260rpx;
					background-color: #ff6b35;
					position: relative;

					.message {
						color: #ffffff;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						margin-top: 40rpx;

						view:nth-child(1) {
							font-weight: bold;
							font-size: 60rpx;
						}

						view:nth-child(2) {
							font-size: 24rpx;
						}
					}

					.wave-line {
						height: 220rpx;
						width: 8rpx;
						position: absolute;
						top: 0;
						left: 0;
						background-color: #ff6b35;
						overflow: hidden;

						.wave {
							width: 8rpx;
							height: 16rpx;
							background-color: #ffffff;
							border-radius: 0 16rpx 16rpx 0;
							margin-top: 4rpx;
						}
					}

					.circle {
						width: 40rpx;
						height: 40rpx;
						background-color: #f9f9f9;
						position: absolute;
						border-radius: 50%;
						z-index: 111;
					}

					.circle-top {
						top: -20rpx;
						right: -20rpx;
					}

					.circle-bottom {
						bottom: -20rpx;
						right: -20rpx;
					}
				}

				.right {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 450rpx;
					font-size: 24rpx;
					height: 100%;
					background-color: #ffffff;
					overflow: hidden;
					position: relative;

					>view:nth-child(1) {
						color: #666666;
						margin-left: 20rpx;
						display: flex;
						height: 100%;
						flex-direction: column;
						justify-content: space-around;

						>view:nth-child(1) {
							color: #ff6262;
							font-size: 30rpx;
						}
					}

					.receive {
						color: #ffffff;
						background-color: #ff3c2a;
						border-radius: 50%;
						width: 86rpx;
						height: 86rpx;
						text-align: center;
						margin-right: 30rpx;
						vertical-align: middle;
						padding-top: 8rpx;
						position: relative;
						z-index: 2;
					}

					.bg-quan {
						width: 244rpx;
						height: 244rpx;
						border: 6rpx solid #ff3c2a;
						border-radius: 50%;
						opacity: 0.1;
						color: #ff3c2a;
						text-align: center;
						padding-top: 30rpx;
						font-size: 130rpx;
						position: absolute;
						right: -54rpx;
						bottom: -60rpx;
					}
				}
			}
		}
	}

	.coupon-title {
		width: 260rpx;

	}
</style>
